<template>
  <div class="page">
    <TopBar title="开通vip"></TopBar>
    <div class="clear"></div>
    <!--active-->
    <div class="item" :class="index == now_index ? 'active' : ''" v-for="(item,index) in vip_list" :key="item"
         @click="now_index = index">
      <div>
        <div class="title">{{ item.name }}</div>
        <div class="desc">{{ item.time_text }} 日均{{ item.day_price }}元</div>
      </div>
      <div class="price">￥{{ item.price }}</div>
    </div>

    <el-button class="pay" v-if="vip_list.length > 0" @click="pay_act">支付 {{ vip_list[now_index].price }} 元</el-button>
  </div>
</template>

<script>
import TopBar from "@/components/TopBar";

export default {
  name: "OpenVipView.vue",
  components: {
    TopBar
  },
  data() {
    return {
      vip_list: [],
      now_index: 0,
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.$axios.get("customer/vip/").then(res => {
        if (res.data.code == 200) {
          this.vip_list = res.data.data
        }
      })
    },
    pay_act() {
      this.$axios.post("/user/vip/" + this.vip_list[this.now_index].vid + "/pay").then(res => {
        if (res.data.code == 200) {
          window.location.href = res.data.data.url
        }
      })
    }
  }
}
</script>

<style scoped>

.page {
  background-color: rgb(242, 242, 242);
  min-height: 100vh;
}

.item {
  display: flex;
  justify-content: space-between;
  border: 1px solid rgb(246, 215, 191);
  border-radius: 15px;
  margin: 10px 20px;
  padding: 10px 20px;
  align-items: center;
  color: #000000;
  background-color: #FFFFFF;
}

.item:first-child {
  margin-top: 50px;
}

.active {
  background-color: rgb(246, 215, 191);
}

.title {
  font-weight: bold;
  font-size: 16px;
}

.desc {
  color: #999999;
  font-size: 12px;
  margin-top: 10px;
}

.price {
  font-size: 22px;
  font-weight: bold;
}

.pay, .pay:hover {
  width: calc(100% - 40px);
  margin: 0 20px;
  height: 45px;
  font-size: 18px;
  background-color: rgb(246, 215, 191);
  border: none;
  border-radius: 30px;
  color: #666;
  font-weight: bold;
  position: fixed;
  bottom: 50px;
}

</style>